
<template>
  <div class="login">
    <el-form :inline="true" ref="loginForm" :model="loginForm" class="login-form">
      <el-form-item label="交易类型">
        <el-select v-model="loginForm.tradeType" placeholder="请选择">
          <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-tabs v-model="activeName">
        <el-tab-pane label="POS" name="first" v-if="loginForm.tradeType == '21' ||
          loginForm.tradeType == '23' || loginForm.tradeType == '25' || loginForm.tradeType == '26' ||
          loginForm.tradeType == '00' || loginForm.tradeType == '01'">
          <el-form-item label="应用类型">
            <el-select v-model="loginForm.applicationType" placeholder="请选择">
              <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>

          </el-form-item>
          <!--          <el-form-item label="付款方式">-->
          <!--            <el-select v-model="loginForm.Description" placeholder="请选择">-->
          <!--              <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value">-->
          <!--              </el-option>-->
          <!--            </el-select>-->

          <!--          </el-form-item>-->
          <el-form-item label="付款代码">
            <el-select v-model="loginForm.depatment" placeholder="请选择">
              <el-option v-for="item in options4" :key="item.value" :label="item.label" :value="item.value">

              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="POS机号">
            <el-select v-model="loginForm.posNumber" placeholder="请选择">
              <el-option v-for="item in options5" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="POS工号">
            <el-input v-model="loginForm.posEmpNo" maxlength="8" show-word-limit type="text" auto-complete="off">
            </el-input>
          </el-form-item>




          <el-form-item label="交易金额">
            <el-input v-model="loginForm.money" maxlength="12" show-word-limit type="text" auto-complete="off">
            </el-input>
          </el-form-item>

          <el-form-item label="交易日期">
            <el-input v-model="loginForm.tradeDate" maxlength="8" show-word-limit type="text" auto-complete="off">
            </el-input>
          </el-form-item>

          <el-form-item label="原参考号">
            <el-input v-model="loginForm.tradeNo" maxlength="12" show-word-limit type="text" auto-complete="off">
            </el-input>

          </el-form-item>

          <el-form-item label="原凭证号">
            <el-input v-model="loginForm.voucherNo" type="text" maxlength="6" show-word-limit auto-complete="off">
            </el-input>
          </el-form-item>

          <el-form-item label="LRC校验">
            <el-input v-model="loginForm.lrc" type="text" maxlength="3" show-word-limit auto-complete="off">
            </el-input>
          </el-form-item>

          <el-form-item style="width:100%;">
            <el-button :loading="loading" size="medium" type="primary" style="width:100%;"
                       @click.native.prevent="handleLogin">
              <span>支 付</span>
            </el-button>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="开放平台" name="first" v-if="loginForm.tradeType == '99'">

          <el-form-item label="终端号">
            <el-select v-model="loginForm.termNoIn" placeholder="请选择">
              <el-option v-for="item in options5" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商户号">
            <el-input v-model="loginForm.mchntNoIn" type="text">
            </el-input>
          </el-form-item>
          <el-form-item style="width:100%;">
            <el-button :loading="loading" size="medium" type="primary" style="width:100%;" @click.native.prevent="sign">
              <span>签 到</span>
            </el-button>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="开放平台" name="first" v-if="loginForm.tradeType == '98'">

          <el-form-item label="终端号">
            <el-select v-model="loginForm.termNoIn" placeholder="请选择">
              <el-option v-for="item in options5" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商户号">
            <el-input v-model="loginForm.mchntNoIn" type="text">
            </el-input>
          </el-form-item>

          <el-form-item label="交易金额">
            <el-input v-model="loginForm.transAmt" maxlength="12" show-word-limit type="text" auto-complete="off">
            </el-input>
          </el-form-item>

          <el-form-item label="授权号">
            <el-input v-model="loginForm.authNo" type="text">
            </el-input>
          </el-form-item>

          <el-form-item label="卡号">
            <el-input v-model="loginForm.priAcctNoHit" type="text">
            </el-input>
          </el-form-item>
          <el-form-item style="width:100%;">
            <el-button :loading="loading" size="medium" type="primary" style="width:100%;"
                       @click.native.prevent="preauthcmp">
              <span>确 定</span>
            </el-button>
          </el-form-item>
        </el-tab-pane>


        <el-tab-pane label="开放平台" name="first" v-if="loginForm.tradeType == '97'">

          <el-form-item label="终端号">
            <el-select v-model="loginForm.termNoIn" placeholder="请选择">
              <el-option v-for="item in options5" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商户号">
            <el-input v-model="loginForm.mchntNoIn" type="text">
            </el-input>
          </el-form-item>

          <el-form-item label="交易金额">
            <el-input v-model="loginForm.transAmt" maxlength="12" show-word-limit type="text" auto-complete="off">
            </el-input>
          </el-form-item>

          <!-- <el-form-item label="授权号">
            <el-input v-model="loginForm.authNo" type="text">
            </el-input>
          </el-form-item> -->
          <el-form-item label="卡号">
            <el-input v-model="loginForm.priAcctNoHit" type="text">
            </el-input>
          </el-form-item>
          <el-form-item label="原订单号">
            <el-input v-model="loginForm.oriPlatOrderId" type="text">
            </el-input>
          </el-form-item>
          <el-form-item style="width:100%;">
            <el-button :loading="loading" size="medium" type="primary" style="width:100%;"
                       @click.native.prevent="preauthcmpcancel">
              <span>确 定</span>
            </el-button>
          </el-form-item>
        </el-tab-pane>

        <el-tab-pane label="开放平台" name="first" v-if="loginForm.tradeType == '96'">

          <el-form-item label="终端号">
            <el-select v-model="loginForm.termNoIn" placeholder="请选择">
              <el-option v-for="item in options5" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商户号">
            <el-input v-model="loginForm.mchntNoIn" type="text">
            </el-input>
          </el-form-item>

          <el-form-item label="交易金额">
            <el-input v-model="loginForm.transAmt" maxlength="12" show-word-limit type="text" auto-complete="off">
            </el-input>
          </el-form-item>

          <el-form-item label="授权号">
            <el-input v-model="loginForm.authNo" type="text">
            </el-input>
          </el-form-item>
          <el-form-item label="卡号">
            <el-input v-model="loginForm.priAcctNoHit" type="text">
            </el-input>
          </el-form-item>
          <el-form-item label="原交易日期">
            <el-input v-model="loginForm.oriTransDate" type="text">
            </el-input>
          </el-form-item>
          <el-form-item style="width:100%;">
            <el-button :loading="loading" size="medium" type="primary" style="width:100%;"
                       @click.native.prevent="preauthcance">
              <span>确 定</span>
            </el-button>
          </el-form-item>
        </el-tab-pane>


        <el-tab-pane label="开放平台" name="first" v-if="loginForm.tradeType == '95'">

          <el-form-item label="终端号">
            <el-select v-model="loginForm.termNoIn" placeholder="请选择">
              <el-option v-for="item in options5" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商户号">
            <el-input v-model="loginForm.mchntNoIn" type="text">
            </el-input>
          </el-form-item>

          <el-form-item label="交易金额">
            <el-input v-model="loginForm.transAmt" maxlength="12" show-word-limit type="text" auto-complete="off">
            </el-input>
          </el-form-item>

          <el-form-item label="卡号">
            <el-input v-model="loginForm.priAcctNoHit" type="text">
            </el-input>
          </el-form-item>

          <el-form-item label="原交易日期">
            <el-input v-model="loginForm.oriTransDate" type="text">
            </el-input>
          </el-form-item>
          <el-form-item style="width:100%;">
            <el-button :loading="loading" size="medium" type="primary" style="width:100%;" @click.native.prevent="refund">
              <span>确 定</span>
            </el-button>
          </el-form-item>
        </el-tab-pane>

        <el-tab-pane label="开放平台" name="first" v-if="loginForm.tradeType =='70'">


          <el-form-item label="支付方式">
            <el-select v-model="loginForm.payMode" placeholder="请选择">
              <el-option v-for="item in options6" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>


          <el-form-item label="交易金额">
            <el-input v-model="loginForm.transactionAmount" maxlength="12" show-word-limit type="text" auto-complete="off">
            </el-input>
          </el-form-item>

          <el-form-item label="支付码">
            <el-input v-model="loginForm.payCode" type="text">
            </el-input>
          </el-form-item>


          <el-form-item style="width:100%;">
            <el-button :loading="loading" size="medium" type="primary" style="width:100%;" @click.native.prevent="bcpay">
              <span>确 定</span>
            </el-button>
          </el-form-item>
        </el-tab-pane>

        <el-tab-pane label="开放平台" name="first" v-if="loginForm.tradeType == '71'">


          <el-form-item label="交易金额">
            <el-input v-model="loginForm.transactionAmount" maxlength="12" show-word-limit type="text" auto-complete="off">
            </el-input>
          </el-form-item>

          <el-form-item label="银商订单号">
            <el-input v-model="loginForm.orderId" type="text">
            </el-input>
          </el-form-item>


          <el-form-item style="width:100%;">
            <el-button :loading="loading" size="medium" type="primary" style="width:100%;" @click.native.prevent="quickcompleteauthorization">
              <span>确 定</span>
            </el-button>
          </el-form-item>
        </el-tab-pane>


        <el-tab-pane label="开放平台" name="first" v-if="loginForm.tradeType == '72'">



          <el-form-item label="交易金额">
            <el-input v-model="loginForm.transactionAmount" maxlength="12" show-word-limit type="text" auto-complete="off">
            </el-input>
          </el-form-item>

          <el-form-item label="银商订单号">
            <el-input v-model="loginForm.orderId" type="text">
            </el-input>
          </el-form-item>


          <el-form-item style="width:100%;">
            <el-button :loading="loading" size="medium" type="primary" style="width:100%;" @click.native.prevent="quickvoidauthorization">
              <span>确 定</span>
            </el-button>
          </el-form-item>
        </el-tab-pane>

        <el-tab-pane label="开放平台" name="first" v-if="loginForm.tradeType == '73'">




          <el-form-item label="交易金额">
            <el-input v-model="loginForm.transactionAmount" maxlength="12" show-word-limit type="text" auto-complete="off">
            </el-input>
          </el-form-item>


          <el-form-item label="支付方式">
            <el-select v-model="loginForm.payMode" placeholder="请选择">
              <el-option v-for="item in options6" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="支付码">
            <el-input v-model="loginForm.payCode" type="text">
            </el-input>
          </el-form-item>


          <el-form-item style="width:100%;">
            <el-button :loading="loading" size="medium" type="primary" style="width:100%;" @click.native.prevent="bc">
              <span>确 定</span>
            </el-button>
          </el-form-item>
        </el-tab-pane>

        <el-tab-pane label="开放平台" name="first" v-if="loginForm.tradeType == '74'">

          <el-form-item label="商户订单号">
            <el-input v-model="loginForm.merchantOrderId" type="text">
            </el-input>
          </el-form-item>



          <el-form-item style="width:100%;">
            <el-button :loading="loading" size="medium" type="primary" style="width:100%;" @click.native.prevent="voidpayment">
              <span>确 定</span>
            </el-button>
          </el-form-item>
        </el-tab-pane>

      </el-tabs>

    </el-form>


  </div>
</template>
<script>
  import { dllPay, getroleList, signApi, preauthcmpApi, preauthcmpcancelApi, preauthcanceApi, refundApi } from "@/api/login";
  import Cookies from "js-cookie";
  import { encrypt, decrypt } from '@/utils/jsencrypt'
  import {param} from "@/utils";
  import {bcpay, preauthorizeApi, quickcompleteauthorization, quickvoidauthorization, voidpayment} from "../api/login";

  export default {
    name: "Login",
    data() {
      return {

        depss: [],
        codeUrl: "",
        loginForm: {
          depatment: 9004,
          applicationType: "00",
          tradeType: this.$route.query.type,
          posNumber: "",
          posEmpNo: "23456789",
          money: (""+this.$route.query.credit).replace("-",""),
          tradeDate: "20141212",
          tradeNo: "123412341234",
          voucherNo: this.$route.query.supplement,
          lrc: "",
          termNoIn: "",
          mchntNoIn: "8984601701199KS",
          authNo: this.$route.query.approveCode,   //授权号
          priAcctNoHit: this.$route.query.creditCardNo,  //卡号
          transAmt: this.$route.query.approveAmount,
          bcIp:"112.66.183.207",
          transactionAmount: this.$route.query.approveAmount,
          orderId: this.$route.query.bankTrxCode,
          merchantOrderId:('order'+this.$route.query.supplement).split(':')[1],
          oriPlatOrderId: this.$route.query.voucherNo
        },
        //00123456782345678900000000 00000120141212123412341234123456000
        options3: [{
          value: '00',
          label: '银行卡交易'
        }],
        options4: [{
          value: 9004,
          label: 'Room Charge.房费'
        }],


        options5: [{
          value: 'V8ZLVQ0S',
          label: 'V8ZLVQ0S'
        }, {
          value: 'YMY9B3CD',
          label: 'YMY9B3CD'
        },
          {
            value: 'A2YVB0AZ',
            label: 'A2YVB0AZ'
          },
          {
            value: 'VZSX1JJ3',
            label: 'VZSX1JJ3'
          },
          {
            value: 'V89Q34PK',
            label: 'V89Q34PK'
          },
          {
            value: '12345678',
            label: '12345678'
          },
          {
            value: '89990299',
            label: '89990299'
          },
          {
            value: 'F1LDK0PC',
            label: 'F1LDK0PC'
          }


        ],
        options6: [{
          value: 'CODE_SCAN',
          label: '扫码'
        }, {
          value: 'MANUAL',
          label: '手输'
        }],



        options2: [{
          value: '21',
          label: '预授权'
        }, {
          value: '00',
          label: '消费'
        }, {
          value: '01',
          label: '撤销'
        }
          , {
            value: '99',
            label: '签到'
          }

          , {
            value: '98',
            label: '预授权完成'
          }

          , {
            value: '97',
            label: '预授权完成撤销'
          }

          , {
            value: '96',
            label: '预授权撤销'
          }

          , {
            value: '95',
            label: '退货'
          }
          , {
            value: '70',
            label: '担保'
          }
          , {
            value: '71',
            label: '快速担保完成'
          }
          , {
            value: '72',
            label: '快速担保撤销'
          }
          , {
            value: '73',
            label: 'bc交易'
          }
          , {
            value: '74',
            label: 'bc撤销'
          }
        ],

        activeName: "first",
        loading: false,

        // 验证码开关
        captchaEnabled: false,
        // 注册开关
        register: false,
      };
    },
    watch: {
      $route: {
        handler: function (route) {
          this.redirect = route.query && route.query.redirect;
        },
        immediate: true
      }
    },
    created() {
      this.getDep();
      this.sub();
    },

    mounted() {

    },


    methods: {
      getDep() {
        getroleList({}).then(res => {
          this.depss = res
        })
      },
      sub() {
        // 将数字转换为字符串
        let numberString = this.$route.query.creditCardNo
        // 截取前6位
        let firstSixDigits = numberString.substring(0, 6);

        // 截取后4位
        let lastFourDigits = numberString.substring(numberString.length - 4);

        console.log("前6位: " + firstSixDigits);
        console.log("后4位: " + lastFourDigits);
        this.loginForm.priAcctNoHit=firstSixDigits+"*********"+lastFourDigits
        console.log("wc: " + this.loginForm.priAcctNoHit);
      },
      handleLogin() {
        let query;
        let param;
        let type = this.loginForm.tradeType
        let pay = this.depatment
        if (type == '21') {
          console.log('预授权')
          param = this.$route.query.reservationCode + ',' + this.$route.query.syOperator + ',' + this.loginForm.money
          console.log(param);
          query = this.loginForm.applicationType + this.loginForm.posNumber +
            this.loginForm.posEmpNo + this.loginForm.tradeType +
            this.moneyValue(this.loginForm.money) + this.loginForm.tradeDate +
            this.loginForm.tradeNo + '123456' + '000'
        }
        if (type == '00') {
          console.log('消费')
          param = this.$route.query.reservationCode + ',' + this.$route.query.syOperator + ',' + this.loginForm.money + ',' + this.$route.query.bankTrxCode + ',' + this.loginForm.depatment
          console.log(param);
          query = this.loginForm.applicationType + this.loginForm.posNumber +
            this.loginForm.posEmpNo + this.loginForm.tradeType +
            this.moneyValue(this.loginForm.money) + this.loginForm.tradeDate +
            this.loginForm.tradeNo + '123456' + '000'
        }

        if (type == '01') {
          console.log('撤销')
          param = this.$route.query.reservationCode + ',' + this.$route.query.syOperator + ',' + this.loginForm.money + ',' + this.$route.query.bankTrxCode + ',' + this.loginForm.depatment
          console.log(param)
          query = this.loginForm.applicationType + this.loginForm.posNumber +
            this.loginForm.posEmpNo + this.loginForm.tradeType +
            this.moneyValue(this.loginForm.money) + this.loginForm.tradeDate +
            this.loginForm.tradeNo + this.loginForm.voucherNo + '000'
        }

        let queryParams = {
          input: query,
          type: type,
          param: param,
          no: this.loginForm.posNumber
        }
        this.loading = true;
        dllPay(queryParams).then(res => {
          alert(res.msg)
        }).catch(() => {
          this.loading = false;
        });;
      },


      sign() {

        let queryParams = {
          termNoIn: this.loginForm.termNoIn,
          mchntNoIn: this.loginForm.mchntNoIn,
        }
        this.loading = true;
        signApi(queryParams).then(res => {
          alert(res.data)
          this.loading = false;
        }).catch(() => {
          this.loading = false;
        });;
      },

      preauthcmp() {
        let params = this.$route.query.reservationCode +  ',' + this.$route.query.bankTrxCode + ','+this.loginForm.transAmt+','+this.$route.query.creditCardNo+','+this.$route.query.approveCode+',';
        let queryParams = {
          termNoIn: this.loginForm.termNoIn,
          mchntNoIn: this.loginForm.mchntNoIn,
          transAmt: this.loginForm.transAmt,
          authNo: this.loginForm.authNo,
          priAcctNoHit: this.loginForm.priAcctNoHit,
          params: params,
        }

        this.loading = true;
        preauthcmpApi(queryParams).then(res => {
          alert(res.data)
          this.loading = false;
        }).catch(() => {
          this.loading = false;
        });;
      },
      preauthcmpcancel() {
        let params = this.$route.query.reservationCode +  ',' + this.$route.query.bankTrxCode + ','+ this.$route.query.approveAmount +',';
        let queryParams = {
          termNoIn: this.loginForm.termNoIn,
          mchntNoIn: this.loginForm.mchntNoIn,
          transAmt: this.loginForm.transAmt,
          oriPlatOrderId: this.loginForm.oriPlatOrderId,
          priAcctNoHit: this.loginForm.priAcctNoHit,
          params: params
        }
        this.loading = true;
        preauthcmpcancelApi(queryParams).then(res => {
          alert(res.data)

          this.loading = false;

        }).catch(() => {
          this.loading = false;
        });;
      },

      //bc担保
      bcpay(){
        let queryParams={
          transactionAmount:this.loginForm.transactionAmount*100,
          payMode:this.loginForm.payMode,
          payCode:this.loginForm.payCode,
          params: this.$route.query.reservationCode,
          money:this.loginForm.transactionAmount
        }
        this.loading = true;
        preauthorizeApi(queryParams).then(res => {
          alert(res.data)
          this.loading = false;

        }).catch(() => {
          this.loading = false;
        });;
      },
      //bc快速担保完成
      quickcompleteauthorization(){
        let queryParams={
          transactionAmount:this.loginForm.transactionAmount*100,
          orderId:this.loginForm.orderId,
          params: this.$route.query.reservationCode,
          money:this.loginForm.transactionAmount
        }
        this.loading = true;
        quickcompleteauthorization(queryParams).then(res => {
          alert(res.data)
          this.loading = false;

        }).catch(() => {
          this.loading = false;
        });;
      },
      //bc快速担保撤销
      quickvoidauthorization(){
        let queryParams={
          transactionAmount:this.loginForm.transactionAmount*100,
          orderId:this.loginForm.orderId,
          params: this.$route.query.reservationCode
        }
        this.loading = true;
        quickvoidauthorization(queryParams).then(res => {
          alert(res.data)
          this.loading = false;

        }).catch(() => {
          this.loading = false;
        });;
      },
      //bc交易
      bc(){
        let queryParams={
          transactionAmount:this.loginForm.transactionAmount*100,
          payMode:this.loginForm.payMode,
          payCode:this.loginForm.payCode,
          params: this.$route.query.reservationCode,
          money:this.loginForm.transactionAmount
        }
        this.loading = true;
        bcpay(queryParams).then(res => {
          alert(res.data)
          this.loading = false;

        }).catch(() => {
          this.loading = false;
        });;
      },
      //bc交易撤销
      voidpayment(){
        let queryParams={
          merchantOrderId:this.loginForm.merchantOrderId,
          params: this.$route.query.reservationCode
        }
        this.loading = true;
        voidpayment(queryParams).then(res => {
          alert(res.data)
          this.loading = false;

        }).catch(() => {
          this.loading = false;
        });;
      },
      preauthcance() {
        let params = this.$route.query.bankTrxCode + ',';

        let queryParams = {
          termNoIn: this.loginForm.termNoIn,
          mchntNoIn: this.loginForm.mchntNoIn,
          transAmt: this.loginForm.transAmt,
          authNo: this.loginForm.authNo,
          priAcctNoHit: this.loginForm.priAcctNoHit,
          oriTransDate: this.loginForm.oriTransDate,
          params: params
        }
        this.loading = true;
        preauthcanceApi(queryParams).then(res => {
          alert(res.data)
          this.loading = false;

        }).catch(() => {
          this.loading = false;
        });;
      },

      refund() {

        let queryParams = {
          termNoIn: this.loginForm.termNoIn,
          mchntNoIn: this.loginForm.mchntNoIn,
          transAmt: this.loginForm.transAmt,
          oriPlatOrderId: this.loginForm.oriPlatOrderId,
          priAcctNoHit: this.loginForm.priAcctNoHit,
          oriTransDate: this.loginForm.oriTransDate,
        }
        this.loading = true;
        refundApi(queryParams).then(res => {
          alert(res.data)
          this.loading = false;

        }).catch(() => {
          this.loading = false;
        });;
      },



      moneyValue: function (money) {
        const stringValue = (money * 100).toString();
        return stringValue.padStart(12, '0');
      },

      moneyValueSystem: function (money) {
        const stringValue = (money * 100).toString();
        // return stringValue.padStart(1, '0');
      },


    },

  };
</script>

<style rel="stylesheet/scss" lang="scss">
  .login {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-image: url("../assets/images/login-background.jpg");
    background-size: cover;
  }

  .title {
    margin: 0px auto 30px auto;
    text-align: center;
    color: #707070;
  }

  .login-form {
    border-radius: 6px;
    background: #ffffff;
    width: 400px;
    padding: 25px 25px 5px 25px;

    .el-input {
      height: 38px;

      input {
        height: 38px;
      }
    }

    .input-icon {
      height: 39px;
      width: 14px;
      margin-left: 2px;
    }
  }

  .login-tip {
    font-size: 13px;
    text-align: center;
    color: #bfbfbf;
  }

  .login-code {
    width: 33%;
    height: 38px;
    float: right;

    img {
      cursor: pointer;
      vertical-align: middle;
    }
  }

  .el-login-footer {
    height: 40px;
    line-height: 40px;
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    color: #fff;
    font-family: Arial;
    font-size: 12px;
    letter-spacing: 1px;
  }

  .login-code-img {
    height: 38px;
  }
</style>
